import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import "../../styles/index.scss";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import Select from "./Select";
library.add(fas);
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: "components/Select",
  component: Select,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: "centered",
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {},
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: { onSelect: fn() },
} satisfies Meta<typeof Select>;

export default meta;
type Story = StoryObj<typeof meta>;
const options = [
  { label: "label1", value: "value1" },
  { label: "label2", value: "value2" },
];
export const differentMode: Story = {
  render: () => (
    <>
      <Select
        options={options}
        onSelect={(v) => {
          console.log("select", v);
        }}
        onChange={(v) => {
          console.log("onChange", v);
        }}
      ></Select>
      <div style={{ height: "20px" }}></div>
      <Select
        mode={"tags"}
        options={options}
        onSelect={(v) => {
          console.log("select", v);
        }}
        onChange={(v) => {
          console.log("onChange", v);
        }}
      ></Select>
      <div style={{ height: "20px" }}></div>
      <Select
        mode={"multiple"}
        options={options}
        onSelect={(v) => {
          console.log("select", v);
        }}
        onChange={(v) => {
          console.log("onChange", v);
        }}
      ></Select>
    </>
  ),
};

export const setDisabled: Story = {
  render: () => (
    <>
      <Select
        disabled
        options={options}
        onSelect={(v) => {
          console.log("select", v);
        }}
        onChange={(v) => {
          console.log("onChange", v);
        }}
      ></Select>
    </>
  ),
};

export const setOpen: Story = {
  render: () => (
    <>
      <Select open options={options}></Select>
    </>
  ),
};

export const optionRender: Story = {
  render: () => (
    <>
      <Select
        options={options}
        optionRender={(option) => (
          <span> {option?.label + "---" + option?.value}</span>
        )}
      ></Select>
    </>
  ),
};
